{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "=================\n",
    "Donut chart: http://www.highcharts.com/demo/pie-donut\n",
    "-----------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:850px;height:400px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;xAxis&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;Browser market share, April, 2011&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;title&quot;: {&quot;text&quot;: &quot;Total percent market share&quot;}}, &quot;chart&quot;: {&quot;width&quot;: 850, &quot;renderTo&quot;: &quot;container&quot;, &quot;type&quot;: &quot;pie&quot;, &quot;height&quot;: 400}, &quot;tooltip&quot;: {&quot;valueSuffix&quot;: &quot;%&quot;}, &quot;plotOptions&quot;: {&quot;pie&quot;: {&quot;shadow&quot;: false, &quot;center&quot;: [&quot;50%&quot;, &quot;50%&quot;]}}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;name&quot;: &quot;Browsers&quot;, &quot;type&quot;: &quot;pie&quot;, &quot;size&quot;: &quot;60%&quot;, &quot;data&quot;: [{&quot;y&quot;: 55.11, &quot;color&quot;: Highcharts.getOptions().colors[0], &quot;name&quot;: &quot;MSIE&quot;}, {&quot;y&quot;: 21.63, &quot;color&quot;: Highcharts.getOptions().colors[1], &quot;name&quot;: &quot;Firefox&quot;}, {&quot;y&quot;: 11.94, &quot;color&quot;: Highcharts.getOptions().colors[2], &quot;name&quot;: &quot;Chrome&quot;}, {&quot;y&quot;: 7.15, &quot;color&quot;: Highcharts.getOptions().colors[3], &quot;name&quot;: &quot;Safari&quot;}, {&quot;y&quot;: 2.14, &quot;color&quot;: Highcharts.getOptions().colors[4], &quot;name&quot;: &quot;Opera&quot;}], &quot;dataLabels&quot;: {&quot;color&quot;: &quot;white&quot;, &quot;distance&quot;: -30, &quot;formatter&quot;: function () {                                     return this.y &gt; 5 ? this.point.name : null;                                }}}, {&quot;innerSize&quot;: &quot;60%&quot;, &quot;name&quot;: &quot;Versions&quot;, &quot;type&quot;: &quot;pie&quot;, &quot;dataLabels&quot;: {&quot;formatter&quot;: function () {                                    return this.y &gt; 1 ? &#x27;&lt;b&gt;&#x27; + this.point.name + &#x27;:&lt;/b&gt; &#x27; + this.y + &#x27;%&#x27;  : null;                                }}, &quot;data&quot;: [{&quot;y&quot;: 10.85, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(0.2).get(), &quot;name&quot;: &quot;MSIE 6.0&quot;}, {&quot;y&quot;: 7.35, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(0.2).get(), &quot;name&quot;: &quot;MSIE 7.0&quot;}, {&quot;y&quot;: 33.06, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(0.2).get(), &quot;name&quot;: &quot;MSIE 8.0&quot;}, {&quot;y&quot;: 2.81, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(0.2).get(), &quot;name&quot;: &quot;MSIE 9.0&quot;}, {&quot;y&quot;: 0.2, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[1]).brighten(0.2).get(), &quot;name&quot;: &quot;Firefox 2.0&quot;}, {&quot;y&quot;: 0.83, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[1]).brighten(0.2).get(), &quot;name&quot;: &quot;Firefox 3.0&quot;}, {&quot;y&quot;: 1.58, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[1]).brighten(0.2).get(), &quot;name&quot;: &quot;Firefox 3.5&quot;}, {&quot;y&quot;: 13.12, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[1]).brighten(0.2).get(), &quot;name&quot;: &quot;Firefox 3.6&quot;}, {&quot;y&quot;: 5.43, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[1]).brighten(0.2).get(), &quot;name&quot;: &quot;Firefox 4.0&quot;}, {&quot;y&quot;: 0.12, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 5.0&quot;}, {&quot;y&quot;: 0.19, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 6.0&quot;}, {&quot;y&quot;: 0.12, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 7.0&quot;}, {&quot;y&quot;: 0.36, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 8.0&quot;}, {&quot;y&quot;: 0.32, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 9.0&quot;}, {&quot;y&quot;: 9.91, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 10.0&quot;}, {&quot;y&quot;: 0.5, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 11.0&quot;}, {&quot;y&quot;: 0.22, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[2]).brighten(0.2).get(), &quot;name&quot;: &quot;Chrome 12.0&quot;}, {&quot;y&quot;: 4.55, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari 5.0&quot;}, {&quot;y&quot;: 1.42, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari 4.0&quot;}, {&quot;y&quot;: 0.23, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari Win 5.0&quot;}, {&quot;y&quot;: 0.21, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari 4.1&quot;}, {&quot;y&quot;: 0.2, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari/Maxthon&quot;}, {&quot;y&quot;: 0.19, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari 3.1&quot;}, {&quot;y&quot;: 0.14, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[3]).brighten(0.2).get(), &quot;name&quot;: &quot;Safari 4.1&quot;}, {&quot;y&quot;: 0.12, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[4]).brighten(0.2).get(), &quot;name&quot;: &quot;Opera 9.x&quot;}, {&quot;y&quot;: 0.37, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[4]).brighten(0.2).get(), &quot;name&quot;: &quot;Opera 10.x&quot;}, {&quot;y&quot;: 1.65, &quot;color&quot;: Highcharts.Color(Highcharts.getOptions().colors[4]).brighten(0.2).get(), &quot;name&quot;: &quot;Opera 11.x&quot;}], &quot;size&quot;: &quot;80%&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=400 width=850></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7f26940a4e90>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width = 850, height = 400)\n",
    "\n",
    "data = [{\n",
    "            'y': 55.11,\n",
    "            'color': 'Highcharts.getOptions().colors[0]',\n",
    "            'drilldown': {\n",
    "                'name': 'MSIE versions',\n",
    "                'categories': ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],\n",
    "                'data': [10.85, 7.35, 33.06, 2.81],\n",
    "                'color': 'Highcharts.getOptions().colors[0]'\n",
    "            }\n",
    "        }, {\n",
    "            'y': 21.63,\n",
    "            'color': 'Highcharts.getOptions().colors[1]',\n",
    "            'drilldown': {\n",
    "                'name': 'Firefox versions',\n",
    "                'categories': ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],\n",
    "                'data': [0.20, 0.83, 1.58, 13.12, 5.43],\n",
    "                'color': 'Highcharts.getOptions().colors[1]'\n",
    "            }\n",
    "        }, {\n",
    "            'y': 11.94,\n",
    "            'color': 'Highcharts.getOptions().colors[2]',\n",
    "            'drilldown': {\n",
    "                'name': 'Chrome versions',\n",
    "                'categories': ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',\n",
    "                    'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],\n",
    "                'data': [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],\n",
    "                'color': 'Highcharts.getOptions().colors[2]'\n",
    "            }\n",
    "        }, {\n",
    "            'y': 7.15,\n",
    "            'color': 'Highcharts.getOptions().colors[3]',\n",
    "            'drilldown': {\n",
    "                'name': 'Safari versions',\n",
    "                'categories': ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',\n",
    "                    'Safari 3.1', 'Safari 4.1'],\n",
    "                'data': [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],\n",
    "                'color': 'Highcharts.getOptions().colors[3]'\n",
    "            }\n",
    "        }, {\n",
    "            'y': 2.14,\n",
    "            'color': 'Highcharts.getOptions().colors[4]',\n",
    "            'drilldown': {\n",
    "                'name': 'Opera versions',\n",
    "                'categories': ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],\n",
    "                'data': [ 0.12, 0.37, 1.65],\n",
    "                'color': 'Highcharts.getOptions().colors[4]'\n",
    "            }\n",
    "        }]\n",
    "\n",
    "options = {\n",
    "\t'chart': {\n",
    "        'type': 'pie'\n",
    "    },\n",
    "    'title': {\n",
    "        'text': 'Browser market share, April, 2011'\n",
    "    },\n",
    "    'yAxis': {\n",
    "        'title': {\n",
    "            'text': 'Total percent market share'\n",
    "        }\n",
    "    },\n",
    "    'plotOptions': {\n",
    "        'pie': {\n",
    "            'shadow': False,\n",
    "            'center': ['50%', '50%']\n",
    "        }\n",
    "    },\n",
    "    'tooltip': {\n",
    "        'valueSuffix': '%'\n",
    "    },\n",
    "}\n",
    "\n",
    "\n",
    "categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera']\n",
    "browserData = []\n",
    "versionsData = []\n",
    "\n",
    "for i in range(len(data)):\n",
    "\n",
    "    browserData.append({\n",
    "        'name': categories[i],\n",
    "        'y': data[i]['y'],\n",
    "        'color': data[i]['color']\n",
    "        })\n",
    "\n",
    "    drillDataLen = len(data[i]['drilldown']['data'])\n",
    "    for j in range(drillDataLen): \n",
    "\n",
    "        brightness = 0.2 - (j / drillDataLen) / 5;\n",
    "        versionsData.append({\n",
    "            'name': data[i]['drilldown']['categories'][j],\n",
    "            'y': data[i]['drilldown']['data'][j],\n",
    "            'color': 'Highcharts.Color(' + data[i]['color'] + ').brighten(' + str(brightness) + ').get()'\n",
    "        })\n",
    "        \n",
    "H.set_dict_options(options)\n",
    "\n",
    "H.add_data_set(browserData, 'pie', 'Browsers', size='60%',\n",
    "            dataLabels={\n",
    "                'formatter': 'function () { \\\n",
    "                                    return this.y > 5 ? this.point.name : null;\\\n",
    "                                }',\n",
    "                'color': 'white',\n",
    "                'distance': -30\n",
    "            })\n",
    "\n",
    "H.add_data_set(versionsData, 'pie', 'Versions', size='80%',\n",
    "            innerSize='60%',\n",
    "            dataLabels={\n",
    "                'formatter': \"function () {\\\n",
    "                                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;\\\n",
    "                                }\"\n",
    "            })\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
